<?php
	include 'map.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mekarsari WEB-GIS</title>
<link href="include/css/facebox.css" 	rel="stylesheet" type="text/css" />
<link href="include/css/map.css" 		rel="stylesheet" type="text/css" />
<link href="include/css/calendar.css" 	rel="stylesheet" type="text/css" />

<script language="javascript" src="include/js/overlib_setting.js"></script>
<script language="javascript" src="include/js/overlib.js"></script>
<script language="javascript" src="include/js/jquery.js"></script>
<script language="javascript" src="include/js/ui.base.js"></script>
<script language="javascript" src="include/js/ui.draggable.js"></script>
<script language="javascript" src="include/js/funcs.js"></script>
<script language="javascript" src="include/js/facebox.js"></script>
</head>
<body> 
<!-- overLib needs this tag right after body-->
<?php echo $image_map; ?>
<div id="pos">&nbsp;</div>
<form method="post" action="<?php echo $script_name;?>" name="formPeta" id="formPeta">
  <table border="0" cellpadding="0" cellspacing="0">
   <tr>
    <td rowspan="12" align="left" valign="top">
     <table border="0">

    <!-- Display up arrow if browser is IE-like -->
         <tr>
            <td align="center" colspan="3">
                <input 
                    name="up" 
                    type="image" 
                    src="images/up.png" 
                    onmouseover='return overlib(unescape("<div class=\"img_up\"/>"));'
                    onmouseout="return nd();"
                    />
           </td>					
        </tr>

    <!-- Display left arrow if browser is IE-like -->
         <tr>
            <td valign="center">
            <input 
				name="left" 
				type="image" 
				src="images/left.png" 
				onmouseover='return overlib(unescape("<div class=\"img_left\"/>"));'
				onmouseout="return nd();"
				/>
           </td>
            <td>	
				<ul id="mapnav"> <!-- map control.. -->
					<li><a href="#" class="toggle" name="nav">navigation</a></li>
					<li><a href="#" class="toggle" name="leg">tema peta</a></li>
					<li class="nav_content">					
					  <table width="100%"  border="0" cellpadding="0" cellspacing="0">
						<tr>
						  <td colspan="2">
						  <div align="center">
							  <input type="image" name="ref" id="ref2" src="<?=$ref_url;?>" width="<?=$ref_w;?>" height="<?=$ref_h;?>" border="0" />
						  </div>				  </td>
						</tr>
						<tr>
						  <td width="52%"><div align="center">Scale 1: <?php echo $scale; ?> </div></td>
						  <td width="48%"><input type="submit" name="zoomIn" value=" " class="zoomIn" />
							  <input type="submit" name="zoomOut" value=" " class="zoomOut"/></td>
						</tr>
						<tr>
						  <td><div align="right">
							  <input name="labelZona" type="checkbox" id="labelZona3" value="1" <?=$label_zona;?>/>
							  <label for="labelZona3">VIEW ZONA</label>
						  </div></td>
						  <td><input name="labelBatas" type="checkbox" id="labelBatas2" value="1" <?=$label_batas;?>/>
							  <label for="labelBatas2">VIEW BATAS</label>                  </td>
						</tr>
						<tr>
						  <td><div align="right">
							  <input name="refresh" type="submit" id="refresh" value="Update" />
						  </div></td>
						  <td><input name="restore" type="button"  value="Restore" onclick="javacript:window.location='<?=$_SERVER['PHP_SELF'];?>';"/>&nbsp;</td>
						</tr>
					  </table>
					</li>
					<li class="legend_content">						        
						<ul class="tema">
						  <li><input type="radio" name="tema">Status Penanaman</input></li>
						  <li><input type="radio" name="tema">Status Pemupukan</input></li>
						  <li><input type="radio" name="tema">Status Pembungaan</input></li>
						  <li><input type="radio" name="tema">Status Polinasi</input></li>
						  <li><input type="radio" name="tema">Status Pemanenan</input></li>
						</ul>
						<hr/>
						<ul class="info">
						  <li>Tertanam : <?=count($info['tertanam']);?></li>
						  <li>Belum Tertanam : <?=count($info['belum_tertanam']);?></li>
						</ul> 
						<hr/>
						<img src="<?php echo $leg_url;?>" alt="" name="legend" id="legend" />
					</li>
				</ul>		
               <img name="img" src="<?=$image_url;?>" width="988" height="622" usemap="#peta" border="1" >
            </td>

    <!-- Display right arrow if browser is IE-like -->
            <td valign="center">
                <input 
                    name="right" 
                    type="image" 
                    src="images/right.png" 
                    onmouseover='return overlib(unescape("<div class=\"img_right\"/>"));'
                    onmouseout="return nd();"
                    />
           </td>
        </tr>

    <!-- Display down arrow if browser is IE-like -->
         <tr>
            <td align="center" colspan="3">
            <input 
				name="down" 
				type="image" 
				src="images/down.png" 
				onmouseover='return overlib(unescape("<div class=\"img_down\"/>"));'
				onmouseout="return nd();"
				/>
           </td>
        </tr>
     </table>
     </td>
   </tr>
</table>
<input type="hidden" name="extent" value="<?php echo $new_extent; ?>" />
</form>
<script language="javascript">
$(document).ready(function(){		
	$("#pos").mouseover(function(){
		$(this).css('left', '-100px');
	}); 
	
	var reset = function(){
		$('ul#mapnav li.nav_content, ul#mapnav li.legend_content').addClass('hidden');
	}
	
	reset();
	
	$('a.toggle').click(function(){
		if( $(this).attr('name') == 'nav' ){
			if( $(this).parent().siblings('li.nav_content').hasClass('hidden') ){
				// show me..
				$(this).parent().siblings('li.nav_content').removeClass('hidden');
				
				// hide him
				$(this).parent().siblings('li.legend_content').addClass('hidden');
			}
			else reset();
		}
		else{
			if( $(this).parent().siblings('li.legend_content').hasClass('hidden') ){
				// show him..
				$(this).parent().siblings('li.legend_content').removeClass('hidden');
				
				// hide me
				$(this).parent().siblings('li.nav_content').addClass('hidden');
			}
			else reset();
		}
		
	});	
});
</script>
</body>
</html>